<script setup>
import { ref, computed, onMounted } from 'vue'
import HeadComponents from "@/components/headComponents.vue";
import http from '@/utils/http'

const terms = ref([])
const searchTerm = ref('')
const loading = ref(false)

// 获取术语列表
const fetchTerms = async () => {
  try {
    loading.value = true
    const response = await http.get('/terminology', {
      params: { search_term: searchTerm.value }
    })
    terms.value = response.data
  } catch (error) {
    console.error('获取术语列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 搜索术语
const searchTerms = async () => {
  await fetchTerms()
}

// 计算过滤后的术语
const filteredTerms = computed(() => {
  if (!searchTerm.value) {
    return terms.value
  }
  return terms.value.filter((term) => {
    return term.term_chinese.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
           term.term_lisu.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
           term.term_vietnamese?.toLowerCase().includes(searchTerm.value.toLowerCase())
  })
})

// 组件挂载时获取术语列表
onMounted(() => {
  fetchTerms()
})
</script>

<template>
  <head-components></head-components>
  <div class="container">
    <div class="card terminology-card">
      <!-- 搜索框 -->
      <div class="search-box">
        <input
          v-model="searchTerm"
          type="text"
          placeholder="搜索医疗术语..."
          @keyup.enter="searchTerms"
        />
        <button @click="searchTerms" :disabled="loading">
          <i :class="loading ? 'fas fa-spinner fa-spin' : 'fas fa-search'"></i>
          {{ loading ? '搜索中...' : '搜索' }}
        </button>
      </div>

      <!-- 表格容器 -->
      <div class="terms-table-container">
        <table class="terms-table">
          <thead>
          <tr>
            <th>中文术语</th>
            <th>傈僳语翻译</th>
            <th>越南语翻译</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="term in filteredTerms" :key="term.id">
            <td>{{ term.term_chinese }}</td>
            <td>{{ term.term_lisu }}</td>
            <td>{{ term.term_vietnamese || '-' }}</td>
          </tr>
          </tbody>
        </table>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading">
          <i class="fas fa-spinner fa-spin"></i>
          <p>加载中...</p>
        </div>

        <!-- 空状态提示 -->
        <div v-else-if="filteredTerms.length === 0" class="no-results">
          <i class="fas fa-search"></i>
          <p>未找到匹配的医疗术语</p>
          <span>请尝试使用其他关键词搜索</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>